<template>
  <div
    v-if="element && element.length > 0"
    :style="{
      height: element[0].height + 'px',
      width: element[0].width + 'px',
      zIndex: element[0].zIndex,
      top: element[0].top + 'px',
      left: element[0].left + 'px',
    }"
  >
    <template v-for="(item, index) in element">
      <div
        :key="index"
        v-if="index > 0 && item.height>0 && item.width>0"
        :style="{
          height: item.height + 'px',
          width: item.width + 'px',
          zIndex: item.zIndex,
          top: item.top + 'px',
          left: item.left + 'px'
        }"
        class="common"
        @click.stop="clickElement(item)"
      >
        <div class="name">
          {{ item.text }}
        </div>
        <!-- <div v-if="item.children" class="commonChlidren">
        <phone-div :element="item.children" v-on="$listeners" />
      </div> -->
      </div>
    </template>
  </div>
</template>       
<script>
export default {
  name: "phoneDiv",
  props: {
    element: {
      default: [],
      typeof: Array,
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    clickElement(item) {
      this.$emit("treeClick", item);
    },
  },
};
</script>

<style lang="scss" scoped>
.father {
  position: relative;
}
.common {
  position: absolute;
  border: 1px solid #fff;
  cursor: pointer;
  .commonChlidren {
    position: relative;
    height: 100%;
    width: 100%;
  }
  .name {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    font-size: 1px;
    color: #fff;
  }
}
.common:hover {
  background: rgba(106, 88, 242, 0.6);
}
</style>